<template>
	<view class="app_Cont">
		<view class="showCont" v-if="showCont">
			<view class="vipHead">
				<view @click="backFn" class="backBtn hasWidth iconfont icon-fanhui"></view>
				<view class="navCont">
					<view @click="navFn(item)" :class="navId==item.id?'navItemActive navItem':'navItem'" :key="index" v-for="(item,index) in navArr">
						<view class="navName">{{item.name}}</view>
						<view class="navLine">
							<view class="line_" v-if="navId==item.id"></view>
						</view>
					</view>
				</view>
				<view class="hasWidth"></view>
			</view>
			
			<view class="formCont1" v-if="navId==1">
				<view class="vipCard" v-if="menberData.crew_enterprise.is_crew_enterprise==1" @click="editComFn">
					<view class="vipLeft">
						<view class="vipName">
							点击卡片完善公司信息
						</view>
					</view>
					<view class="comImg">
						<view class="iconfont icon-qiyerenzheng"></view>
					</view>
				</view>
				<view class="vipCard" @click="toComCenter" v-if="menberData.crew_enterprise.is_crew_enterprise!=1">
					<view class="vipTag" v-if="menberData.crew_hy_type>0">超级会员</view>
					<view class="vipLeft">
						<view class="vipName">
							{{comInfo.enterprise_name}}
						</view>
						<view class="comTel">
							<view class="iconfont icon-24gl-phoneLoudspeaker"></view>
							<view class="telNum">{{comInfo.enterprise_person}} · {{comInfo.enterprise_mobile}}</view>
						</view>
						<view class="comTel" >
							<view class="iconfont icon-dizhi"></view>
							<view class="telNum">{{comInfo.enterprise_address}}</view>
						</view>
						<view class="vipTip">
							<view v-if="menberData.crew_hy_type>0">
								<text class="iconfont icon-dengdai" ></text>
								<text >{{menberData.crew_hy_end_time}}会员到期</text>
							</view>
							<view v-if="menberData.crew_hy_type==0">
								<text class="iconfont icon-lock1" ></text>
								<text >剩余{{menberData.cs}}次免费解锁</text>
							</view>
						</view>
					</view>
					<view class="comImg">
						<view v-if="menberData.crew_enterprise.is_crew_enterprise==1" class="iconfont icon-qiyerenzheng"></view>
						<image mode="widthFix" v-if="menberData.crew_enterprise.is_crew_enterprise!=1" :src="comInfo.enterprise_logo"></image>
					</view>
				</view>
				<view class="vip_qy">
					<!-- <view class="qy_title">超级会员权益</view> -->
					<view class="qy_des">
						<view class=" textCenter">超级会员权益</view>
						<view class="qydes_item flexDes">
							<view class="iconfont icon-jiesuo"></view>
							<view class="qydes_item_text">会员期间，无限次免费解锁船员联系</view>
						</view>
						<view class="qydes_item flexDes">
							<view class="iconfont icon-qiyejingzhunhuokexitong"></view>
							<view class="qydes_item_text">通过职务、证书、航线快速筛选心仪船员</view>
						</view>
						<view class="qydes_item flexDes">
							<view class="iconfont icon-tuijian-m"></view>
							<view class="qydes_item_text">智能推荐，新船员抢先一步推荐到位</view>
						</view>
						<view class="qydes_item flexDes">
							<view class="iconfont icon-fabubiaoshu"></view>
							<view class="qydes_item_text">岗位发布，发布船员招聘岗位并同步小程序</view>
						</view>
					</view>
				</view>
				<view class="vip_qy hasTop">
					<view class="qy_title">会员套餐</view>
					<view class="cateCont">
						<view @click="cateFn(item)" :class="cateId==item.type?'cateItem activeItem':'cateItem'" :key="index" v-for="(item,index) in menberData.package">
							<view class="cateTag" v-if="item.hd_name">
								<view class="cateTag_">{{item.hd_name}}</view>
							</view>
							<view class="cateName">
								{{item.package_name}}
							</view>
							<view class="cateMoney">¥ {{item.price}}</view>
							<view class="cateMoney_">¥ {{getDayMoney(item)}}/天</view>
						</view>
					</view>
				</view>
				<view class="vipLink">
					<view @click="isCheck = !isCheck" :class="isCheck?'checkBox_ iconfont icon-gouxuan1':'checkBox iconfont icon-gouxuan1'"></view>
					<view class="linkText"><text @click="isCheck = !isCheck">已阅读并同意</text><text class="linkText_" @click="linkFn">《会员服务协议》</text></view>
				</view>
				<view class="vipBtn" @click="payFn">同意协议并{{menberData.crew_hy_type==0?'开通会员':'续费会员'}}</view>
			</view>
			<view class="formCOnt2" v-if="navId==2">
				<view class="vip_qy">
					<view class="qy_des">
						<view class=" textCenter">端口会员{{qyData.length}}大权益</view>
						<view class="qydes_item" :key="index" v-for="(item,index) in qyData">
							<view class="qy_top">
								<!-- <view class="iconfont icon-jiesuo"></view> -->
								<view class="qydes_item_text">{{item.rights_name}}</view>
							</view>
							<view class="qy_text">{{item.rights_describe}}</view>
							<image mode="widthFix" class="qy_img" :src="item.rights_img" /></image>
						</view>
					</view>
				</view>
				<view class="vipLink">
					<view class="linkText">请联系管理员开通“企业端口”</view>
				</view>
				<view class="vipBtn flexCont" @click="telFn()">
					<view class="iconfont icon-kefu2"></view>
					<view>联系客服</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<subLoad v-if="showSub"></subLoad>
		<load v-if="!showCont"></load>
	</view>
</template>

<script>
	import api from '@/http/api.js'
	import subLoad from '@/components/sub.vue'
	import ruleCheck from '@/utils/ruleCheck.js'
	import load from '@/components/load.vue'
	export default {
		components:{subLoad,load},
		data() {
			return {
				isCheck:false,
				showSub:false,
				showCont:false,
				comInfo:{},
				navArr:[
					{name:'超级会员',id:1},
					{name:'端口会员',id:2},
				],
				
				menberData:{},
				qyData:[],
				cateArr:[
				],
				navId:1,
				cateId:1,
			};
		},
		methods:{
			backFn(){
				uni.navigateBack({
					delta: 1
				});
			},
			editComFn(){
				uni.navigateTo({
					url: 'signCom/signCom?id='+this.menberData.crew_enterprise.is_crew_enterprise
				});
			},
			toComCenter(){
				uni.navigateTo({
					url: '../comCenter/comCenter'
				});
			},
			checkPhone(){
				return !ruleCheck.checkPhone(this.formData.mobile)
			},
			navFn(item){
				this.navId = item.id
			},
			cateFn(item){
				this.cateId = item.type
			},
			getDayMoney(item){
				if(item.type==1){
					return Number(item.price/30).toFixed(2)
				}else if(item.type==2){
					return Number(item.price/90).toFixed(2)
				}else if(item.type==3){
					return Number(item.price/365).toFixed(2)
				}
			},
			telFn(){
				uni.makePhoneCall({
					phoneNumber:this.menberData.contact_fs,
				})
			},
			linkFn(){
				uni.navigateTo({
					url: '../../user/link/linkDetal/linkDetal?id=4'
				});
			},
			getData(){
				let data = {}
				api.getRequst(data,'/api/Crew/getData').then((res)=>{
					if(res.code==1){
						this.menberData = res.data
						this.comInfo = res.data.crew_enterprise.crew_enterprise
					}
					this.showCont = true
				})
			},
			wxPay(payRes){
				uni.requestPayment({
					"provider": "wxpay",//支付方式  
					"timeStamp":payRes.timeStamp,//时间戳
					"nonceStr":payRes.nonceStr,//随机字符串
					"package":payRes.package,//接口返回的prepay_id
					"signType":payRes.signType,//签名算法，需要与后台下单时一致
					"paySign":payRes.paySign,
					success:  (resSuccess)=> {
						this.getData()
						//触发该success时已经是输入密码支付成功后触发，可做一些页面跳转和成功提示                        
					 },				
					fail: function (err) {
						//支付失败时出发，比如取消支付、余额不足等
					}
				})
			},
			payFn(){
				if(this.isCheck){
					if(this.menberData.crew_hy_type>0){
						uni.showToast({
							title: '已是会员，请勿重复开通',
							icon: 'none'
						});
					}else{
						let data = {
							type:this.cateId
						}
						this.showSub = true
						api.getRequst(data,'/api/Crew/memberPay').then((res)=>{
						    this.showSub =false
							if(res.code==1){
								this.wxPay(res.data)
							}
						})
					}
					
				}else{
					this.$refs.uToast.show({
						message:'请阅读并同意《会员服务协议》',
					})
					return false
				}
			},
			getQy(){
				let data = {}
				api.getRequst(data,'/api/Crew/rights').then((res)=>{
					if(res.code==1){
						this.qyData = res.data
					}
				})
			}
		},
		onShow() {
			this.getData()
			this.getQy()
		}
	}
</script>

<style lang="less">
.showCont{
	min-height: 100vh;
	background-image: linear-gradient(to bottom right,#333,#000);
	padding: 90rpx 4% 30rpx;
	box-sizing: border-box;
	.vipHead{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.backBtn{
			font-size: 28rpx;
			font-weight: bold;
			color: #fff;
		}
		.hasWidth{
			width: 40rpx;
		}
		.navCont{
			display: flex;
			align-items: center;
			justify-content: center;
			.navItem{
				color: #999;
				padding: 10rpx 30rpx;
				font-weight: bold;
				font-size: 28rpx;
				.navName{
					margin-bottom: 15rpx;
				}
			}
			.navItemActive{
				color: #ffeacb;
			}
			.navLine{
				width: 100%;
				height: 5rpx;
				.line_{
					margin: 0 auto;
					width: 50rpx;
					height: 5rpx;
					border-radius: 5rpx;
					background-color: #ffeacb;
				}
			}
		}
	}
	
	.vipCard{
		width: 100%;
		display: flex;
		padding: 30rpx 30rpx 50rpx;
		margin: 30rpx auto;
		box-sizing: border-box;
		border-radius: 30rpx;
		// background-image: linear-gradient(to right bottom,#f5dfb4,#c);
		background-image: linear-gradient(to right bottom,#22201f,#161310);
		border: 1px solid #666;
		position: relative;
		align-items: center;
		.vipTag{
			background-color: #f8d891;
			position: absolute;
			padding: 10rpx 30rpx;
			font-size: 24rpx;
			background-image: linear-gradient(to right, #ffc78e,#ffc78e);
			color: #fff;
			border-radius:0 30rpx 0 30rpx ;
			right: 0;
			top: 0;
		}
		.vipLeft{
			flex: 1;
			width: 100rpx;
			.vipName{
				width: 100%;
				font-size: 32rpx;
				color: #fff;
				font-weight: bold;
				overflow: hidden;
				white-space: normal;
				text-overflow: ellipsis;
			}
			.comTel{
				display: flex;
				align-items: center;
				margin-top: 15rpx;
				color: #ddd;
				.iconfont{
					margin-right: 15rpx;
				}
				.telNum{
					width: 100rpx;
					flex: 1;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.endTime,.vipTip{
				font-size: 24rpx;
				color: #ddd;
				
			}
			.vipTip{
				color: #ffeacb;
				.iconfont{
					margin-right: 15rpx;
				}
				view{
					margin-top: 15rpx;
				}
			}
			
		}
		.comImg{
			padding-top: 50rpx;
			width: 150rpx;
			image{
				width: 100%;
				border-radius: 10rpx;
			}
			.iconfont{
				width: 150rpx;
				border-radius: 10rpx;
				height: 150rpx;
				background-color: #ddd;
				color: #666;
				font-size: 80rpx;
				text-align: center;
				line-height:150rpx;
			}
		}
	}
	.vip_qy{
		.qy_title{
			color: #ffeacb;
			font-size: 30rpx;
			
		}
		.textCenter{
			text-align: center;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
		}
		.cateCont{
			
			display: flex;
			margin-top: 40rpx;
			align-items: center;
			.cateItem{
				color: #ffeacb;
				width: 30%;
				margin-left: 5%;
				padding: 50rpx 0 30rpx;
				box-sizing: border-box;
				text-align: center;
				border-radius: 30rpx;
				background-color: #222835;
				position: relative;
				.cateTag{
					width: 100%;
					top: -28rpx;
					left: 0;
					position: absolute;
					display: flex;
					justify-content: center;
					.cateTag_{
						padding: 10rpx 20rpx;
						font-size: 24rpx;
						border-radius: 50rpx;
						transform: scale(0.7);
						border: 1px solid #ffeacb;
						background-color: #ffeacb;
						color: #000;
					}
				}
				.cateMoney{
					font-size: 34rpx;
					font-weight: bold;
					margin: 15rpx 0;
				}
				.cateMoney_{
					font-size: 24rpx;
					color: #999;
				}
			}
			.activeItem{
				background-color: #ffeacb;
				color: #000;
					
				.cateTag{
					.cateTag_{
						border: 1px solid #000;
					}
				}
				
			}
			:nth-child(1){
				margin-left: 0;
			}
		}
		.qy_des{
			color: #ffeacb;
			background-color:#222835;
			padding: 30rpx;
			padding-top: 70rpx;
			box-sizing: border-box;
			border-radius:30rpx;
			margin-top: 30rpx;
			position: relative;
			.textCenter{
				position: absolute;
				background-color: #f8d891;
				color: #7c5f34;
				top: -30rpx;
				left: 0;
				padding: 10rpx 30rpx;
				border-radius:  30rpx 0 30rpx 0;
			}
			.qydes_item{
				margin-top: 30rpx;
				.qy_top{
					display: flex;
					align-items: center;
					font-size: 30rpx;
					justify-content: center;
					.iconfont{
						width: 40rpx;
						text-align: center;
						margin-right: 20rpx;
						padding: 15rpx 0;
						font-size: 40rpx;
					}
					.icon-tuijian-m{
						font-size: 32rpx;
					}
				}
				.qy_text{
					text-align: center;
					color: #999;
					font-size: 24rpx;
					margin: 20rpx 0 30rpx;
				}
				.qy_img{
					width: 100%;
					border-radius: 20rpx;
					
				}
				
			}
			.flexDes{
				display: flex;
				align-items: center;
				.iconfont{
					margin-right: 10rpx;
					font-size: 32rpx;
				}
				.icon-tuijian-m{
					font-size: 28rpx;
				}
			}
		}
	}
	.hasTop{
		margin-top: 30rpx;
	}
	.vipLink{
		margin-top: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.checkBox,.checkBox_{
			background-color: #999;
			width: 26rpx;
			height: 26rpx;
			border-radius: 50%;
			margin-right: 10rpx;
			color: #999;
			line-height: 26rpx;
		}
		.checkBox_{
			background-color: #f8d891;
			color: #7c5f34;
		}
		.linkText{
			color: #999;
			font-size: 24rpx;
			.linkText_{
				color: #f8d891;
			}
		}
	}
	.vipBtn{
		padding: 25rpx 0;
		margin-top: 30rpx;
		width: 100%;
		text-align: center;
		border-radius: 100rpx;
		background-image: linear-gradient(to right, #fcedbe,#fff,#f8d891);
		color: #7c5f34;
	}
	.flexCont{
		display: flex;
		align-items: center;
		justify-content: center;
		.iconfont{
			margin-right: 10rpx;
			font-size: 32rpx;
		}
	}
}

</style>
